<template>
  <div class="content-box">
    <div class="video" v-if="isShow" v-for="item in videoDataList" :key="item.id">
      <video class="video-js vjs-default-skin" width="100%" height="100%" controls>
        <source :src="item.deviceUrl" type="application/x-mpegURL" />
      </video>
      <div class='device-name' v-if="item.deviceCnName">{{ item.deviceCnName }}</div>
      <div class="hint-text" v-if="!item.deviceUrl">未获取到视频监控</div>
    </div>
    <div class="hint-wrap" v-if="!isShow">
      <i class="el-icon-document-delete"></i>
      <div class="hint-text">暂无视频监控</div>
    </div>

    <div class="page-wrap" v-show="isShow">
      <el-pagination
        class="page"
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page.sync="pageData.pageNum"
        :page-size="pageData.pageSize"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import HttpInterface from "../../../util/httpInterface";

export default {
  name: "HomeMonitoring",
  components: {},
  data() {
    return {
      videoDataList: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 4
      },
      options: {
        controls: true,  //是否显示控制条
        autoplay: false,  // 自动播放开关
        preload: "auto",
        fluid: false,  // 自适应宽高
        controlBar: {
          playToggle: true,
          children: [
            {name: 'playToggle'}, // 播放按钮
            {name: 'currentTimeDisplay'}, // 当前已播放时间
            {name: 'progressControl'}, // 播放进度条
            {name: 'durationDisplay'}, // 总时间
            {
              name: 'volumePanel', // 音量控制
              inline: false, // 不使用水平方式
            },
            {name: 'FullscreenToggle'} // 全屏
          ]
        }
      },
      isShow: true
    };
  },

  beforeDestroy() {
    this.disposeVideo();
  },

  methods: {
    disposeVideo() {
      let len = this.myPlayer && this.myPlayer.length;
      if (len > 0) {
        for (let i = 0; i < len; i++) {
          this.myPlayer[i].dispose();
        }
        this.rtmpArr = [];
      }
    },

    initVideo() {
      this.$nextTick(() => {
        this.myPlayer = [];
        let video = document.getElementsByClassName("video-js");

        this.videoDataList.forEach((item, index) => {
          this.myPlayer[index] = this.$video(video[index], this.options, function onPlayerReady () {
            this.on('error', function() {
              item.isShowRefresh = true;
              console.log("请求数据时遇到错误")
            });

            this.on("ended", function() {
              item.isShowRefresh = true;
              console.log("视频播放结束");
            });

            this.on('play', () => {
              if (item.isShowRefresh) {
                setTimeout(() => {
                  this.src({ type: "application/x-mpegURL", src: item.deviceUrl });
                  this.load(item.deviceUrl);
                  this.play();
                }, 200)
              }
              item.isShowRefresh = false;
              console.log("开始播放")
            });

            this.on('pause', function() {
              console.log("暂停播放")
            });
          }, this);
        })

      });
    },

    // 获取视频信息
    getVideoList(bidSection) {
      this.bidSection = bidSection;
      let _this = this;
      var params = {
        page: this.pageData.pageNum,
        size: 4,
        bidSection
      }
      HttpInterface.requestGet(this, HttpInterface.UEL_FIND_PAGE, params, function (response) {
        var data = response.data;
        _this.videoDataList = [];
        if (data.success) {
          var { rows, total } = data.other;
          _this.handleVideoData(rows);
          _this.pageData.total = total;
        } else {
          _this.errorMessage(data.msg);
        }
      }, function(err) {
        _this.errorMessage("请求数据失败！");
      })
    },

    handleVideoData(arr) {
      this.isShow = arr.length > 0 ? true : false;
      arr.forEach(item => {
        item.isShowRefresh = false;
      })
      this.videoDataList = arr;

      this.$nextTick(() => {
        let video = document.getElementsByClassName('video');

        if (video.length == 1) {
          video[0].style.width = "100%";
          video[0].style.marginRight = "0px";
          video[0].style.marginBottom = "0px";
        } else if (video.length == 2) {
          video[0].style.width = "calc(50% - 3px)";
          video[0].style.marginRight = "6px";
          video[0].style.marginBottom = "0px";
          video[1].style.width = "calc(50% - 3px)";
          video[1].style.marginRight = "0px";
          video[1].style.marginBottom = "0px";
        }

        this.initVideo();
      })
    },

    // 分页
    handleCurrentChange(page) {
      this.pageData.pageNum = Number(page);
      this.disposeVideo();
      this.getVideoList(this.bidSection);
    },
  }
};
</script>

<style scoped lang="scss">
.content-box{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;

  .page-wrap{
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: none;
    transition: all 0.3s;
  }

  &:hover .page-wrap {
    display: block;
  }

  .hint-wrap{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2002;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);

    .el-icon-document-delete{
      font-size: 40px;
    }

    .hint-text{
      margin-top: 14px;
    }
  }
}

.video {
  width: calc(50% - 3px);
  background: #dfdfdf;
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all .3s;
  position: relative;

  &:nth-child(2n) {
     margin-right: 0;
  }

  &:nth-child(3),
  &:nth-child(4) {
    margin-bottom: 1px;
  }

  .device-name{
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #f56c6c;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 2px;
  }

  .hint-text{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
  }
}
</style>

<style scoped>
  /* 视频流样式 */
  .video-js{
    width: 100% !important;
    height: 100% !important;
  }

  .video-js >>> .vjs-big-play-button {
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .video-js >>> .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "\F101";
    line-height: 57px;
  }
</style>
